<!-- 发现 -->
<script setup></script>

<template>
    <div class="homepage">
        <!-- 二级组件声明式导航 -->
        <nav class="navigation">
            <router-link to="/discover/recommend">推荐</router-link>
            <router-link to="/discover/toplist">排行榜</router-link>
            <router-link to="/discover/songlist">歌单</router-link>
        </nav>
        <!-- 二级组件路由出口 -->
        <router-view />
    </div>
</template>

<style scoped>
    .homepage {
        height: 600px;
        background-color: #cc5b0f;
        padding-top: 50px;
        display: flex;
        flex-direction:column;
    }
    /* 二级组件导航栏样式设置 */
    .navigation {
        margin-left: 10%;
        height: 60px;
        display: flex;
    }
    nav a {
        display: block;
        width: 110px;
        height: 60px;
        text-align: center;
        line-height: 60px;

        text-decoration: none;

        background-color: #3d6cec;
        border: #000 1px solid;

        color: #fff;
    }
    .router-link-active {
        background-color: #033177;
    }
</style>